<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 4px dotted green;
            width: 400px;
            height: 300px;
        }
    </style>
</head>

<body>
    <button>获取数据</button>
    <div class="box"></div>
    <script>
        // 0.0 获取dom节点
        var oBtn = document.querySelector("button");
        var oBox = document.querySelector(".box");
        //0.1 给按钮绑定 点击事件
        oBtn.onclick = function () {
            // 1.打开浏览器, 发送请求  创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            // 2.向地址栏输入地址  使用了 xhr的 open函数
            /*
            参数1：请求方式  get  post 
            参数2：请求的地址
            参数3：同步还是异步  默认是true 代表异步
            */
            xhr.open('get', './user.json', true);
            // 3.回车提交 调用 xhr.send(),将请求发送到服务器
            xhr.send();

            // 4.等待服务器返回数据, 并且接收
            //onreadystatechange 当服务端返回结果时，触发事件
            xhr.onreadystatechange = function () {
                console.log(xhr.readyState);
                if (xhr.readyState == 4) {// 表示请求，正常返回结果
                    console.log(xhr.responseText);//xhr.responseText 从服务器端返回的数据
                    //返回的数据是字符串类型，还需要转为对象
                    var data = JSON.parse(xhr.responseText);
                    // 5.渲染到页面上
                    oBox.innerHTML = `用户名是：${data.name}  | 年龄：${data.age}`;
                }
            }
        }
    </script>
</body>

</html>